<template>
    <div class='imageView' :style="heights">
        <div class='titles' style='width:170px'>{{label}}</div>
        <div class="block" >
            <el-image
            style="width: 180px; height: 180px"
            :src="currentValue"
            fit="contain" 
            :preview-src-list="srcList" ></el-image>
            <div style='cursor:pointer;color:rgb(102, 177, 255)' @click="delImg">
                删除
            </div>
        </div>
        

        <el-dialog
            title="上传"
            :visible.sync="dialogVisible"
            width="80%"
            >
            <el-upload
                class="upload-demo"
                drag
                action="http://221.130.79.150:10088/minios/upload"
                :on-success="uploadSuccess"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
            </el-dialog>
    </div>
</template>
<script> 
export default {
    name:'imageHeadView',
    props:['images','heights','id','data','index','label'],
    data(){
        return{
            dialogVisible:false,
            action:'',
            currentValue:this.images,
            srcList:[]
        }
    },
    created(){
       
    
        this.setData();
    },
    methods:{
        uploads(){
            this.dialogVisible=true;
        },
        uploadSuccess(response, file, fileList){
            if(!this.imageList){
                this.imageList=[]; 
            }
            for(let i=0;i<response.length;i++){
                this.imageList.push(response[i]);
                this.srcList.push(response[i].url)
                this.currentValue=response[i].url;
            }
            let data={};
            data.id=this.id;
            data.val=this.currentValue;
            data.index=this.index;
            this.$emit('input',JSON.stringify(data));
            this.$emit('on-change',JSON.stringify(data));
            
            this.srcList=[];
            this.srcList.push(this.currentValue)
        },
        delImg(){
            this.$confirm('确定要删除该图片，删除后不可恢复?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let ids=this.id.split(".");
                    if(ids.length>1){
                        let p=ids[0];
                        let id_=ids[1];
                        if(this.index||this.index=='0'){
                            this.$set(this.data[p][this.index],id_,"");
                        }else{
                        this.$set(this.data[p],id_,"")
                        }
                        
                        
                    }
                }).catch(() => {
                        
            });
            
            
        },
        setData(){
            if(!this.images){
                if(this.data){
                    let ids=this.id.split(".");
                    if(ids.length>1){
                        let p=ids[0];
                        let id_=ids[1];
                        if(this.index||this.index=='0'){
                            try{
                                this.currentValue=this.data[p][this.index][id_];
                            }catch(e){}
                        }else{
                            try{
                                this.currentValue=this.data[p][id_];
                            }catch(e){}
                        }
                        if(this.currentValue==''){
                            this.currentValue=localStorage.getItem("imgIp")+"/rootImg/sl/user.jpg"
                        }
                        this.srcList=[];
                        this.srcList.push(this.currentValue)
                        
                    }
                
                }
            }
        }
    },
    watch:{
        data:{
            handler: function (newVal) {
                console.log("data已经改变------")
                this.setData()
            },      
            deep: true    //深度监听
        }
    }
}
</script>
<style scoped>
    .imageView{
        height:100%;
        width:100%;
        display: flex;
        flex-direction: column;
        padding:20px;
    }
    .block{
        flex:1;
    }
    .upload-demo{
        width:100%;
        text-align:center;
    }
    .el-upload-list{
        height:50px;
        overflow: auto;
    }
</style>